<script setup lang='ts'>
import { getChannelAPI } from '@/api/channel';
import ArticleList from '@/components/ArticleList.vue';
import ChannelNav from '@/components/ChannelNav.vue';
import type { ChannelItem } from '@/types';
import { onMounted, ref } from 'vue';

const ChannelList = ref<ChannelItem[]>([])

const activeId = ref(0)
const getChannel = async () => {
    const result = await getChannelAPI()
    ChannelList.value = result.channels
    activeId.value = result.channels[0].id
}

onMounted(() => {
    getChannel()

})

const updateActiveId = (id: number) => {
    activeId.value = id
}
</script>


<template>
    <ChannelNav :channels="ChannelList" @update-active-id="updateActiveId" :active-id="activeId"></ChannelNav>
    <ArticleList :active-id="activeId"></ArticleList>

    <!-- 二级路由容器 -->
    <div class="fix">
        <router-view></router-view>
    </div>
</template>

<style scoped>
.fix {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
}
</style>